<template>
    <div>
        我是子组件 {{ $parent.str }}


        <button @click="btn">改变父组的数据</button>
        <button @click="btn2">子传父</button>
        <button @click="btn3">给兄弟值</button>
        <br>
        {{ val }}
        <br>
        <br>
        <Gson></Gson>
        <!-- 插槽
            1.默认插槽
            2.具名插槽
            3.作用域插槽
         -->
        <slot></slot>
        <slot name="obj"></slot>
        <template>
            <slot></slot>
        </template>
    </div>
</template>

<script>
import Gson from './Gson'
import eventbus from '../utils/eventBus.js'

export default {
    data() {
        return {
            value: '子组件的值'
        };
    },
    components: {
        Gson
    },
    inject: ['val'],
    props: {

        str: {
            string: '',
            default: ''
        }
    },
    methods: {
        btn() {
            this.$parent.str = '123'
        },
        btn2() {
            this.$emit('change', '子组件传给父组件的值')
        },
        btn3() {
            console.log(123);
            eventbus.$emit('bortherGive', '兄弟给的值')
        },
    },
    beforeCreate() {

        console.log('子:beforeCreate')
    },
    created() {
        console.log('子:created')


    },
    beforeMount() {
        console.log('子:beforeMount')

    },
    mounted() {
        console.log('子:mounted')
    },
    beforeUpdate() {
        console.log('子:beforeUpdate')
    },
    updated() {
        console.log('子:updated')
    },
    beforeDestroy() {
        console.log('子:beforeDestroy')
    },
    destroyed() {
        console.log('子:destroyed')
    },
    activated() {
        console.log('子:activated')
    },
    deactivated() {
        console.log('子:deactivated')
    }
};
</script>./Son.vue